import { useRef } from "react";
import { observer } from "Mobx-react";
import { questionnaire } from "@/stores/questionnaire";
import EditorTitle from "./components/EditorTitle";

function SurveyEditor({ children }: { children: React.ReactNode }) {
  const dataTitle = useRef<any>();
  return (
    <div className="investigation-editor">
      <div className="editor-top" onClick={() => dataTitle.current.open(questionnaire.title, questionnaire.content)}>
        <div className="investigation-title">{questionnaire.title}</div>
        {questionnaire.content !== "" && <div className="investigation-intro" dangerouslySetInnerHTML={{ __html: questionnaire.content }}></div>}
      </div>
      <div className="editor-list">
        <div className="survey-paging" style={{ borderBottom: "1px solid #efefef" }}>
          第1页（共{questionnaire.totalPage}页）
          <div className="paging-menu">
            <span className="paging-insert" onClick={() => questionnaire.insert(questionnaire.insertNum !== -1 ? -1 : -2)}>
              {questionnaire.insertNum !== -1 ? "在此题后插入新题" : "插入题目"}
            </span>
          </div>
        </div>
        {children}
      </div>
      <EditorTitle ref={dataTitle} titleModify={(title, content) => questionnaire.titleModify(title, content)}></EditorTitle>
    </div>
  );
}

export default observer(SurveyEditor);
